<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>今天天气很{{isHot ? '炎热' : '寒冷'}}</h2>
      <button @click="isHot = !isHot">点我切换天气</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      // 也可以监测计算属性
      /* watch: {
            isHot: {
                immediate: true,
                // handler何时调用?当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('idHot被改了', newValue, oldValue)
                }
            }
        } */
    });

    // 被监测的值不存在不报错!
    vm.$watch("isHot", {
      immediate: true,
      handler(newValue, oldValue) {
        console.log("idHot被改了", newValue, oldValue);
      },
    });
  </script>
</html>
